<template>
  <div class="userMgCon contain">
      <header class="boxShadow header">
            <!-- <label>发布管理</label> -->
            <Breadcrumb>
                <BreadcrumbItem to="/">
                    <Icon type="ios-pricetags" color='#2d8cf0' size="15"></Icon>
                    用户管理
                </BreadcrumbItem>
            </Breadcrumb>
            <Row type="flex" justify="start" >
                <Col :span="10">
                    首次登录时间 ：
                    <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" @on-change="selectDateFirst" :value="searchTimeFirst" placeholder="请选择日期" style="width: 260px" ></DatePicker>
                </Col>
                 <Col :span="10">
                    最近登录时间 ：
                    <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" @on-change="selectDateRecent" :value="searchTimeRecent" placeholder="请选择日期" style="width: 260px" ></DatePicker>
                </Col>
            </Row>
      </header>
       <section class="userList outboxstyle">
           <Row type="flex" justify="end">
                <Col>
                    <Button type="primary" id="exportBtn">导 出</Button>
                </Col>
           </Row>
          
           <Table  height="400" ref="selection" stripe 
                    :loading="userLoading" 
                    :columns="userTableHead"
                    :data="userList">
            </Table>
            <Page  class="pageRight pd30px" show-elevator show-sizer show-total
                    :total="totalCount"
                    :current="currentPage"
                    :page-size-opts="[10,30,50,100]"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize">
            </Page>
            <Masklayer type="flower" :loaddingMask="loaddingMask"></Masklayer>
       </section>
  </div>
</template>

<script>
    import {Api} from '../../libs/Api'
    import {GlobalFooter,Masklayer} from '@/components'
    import {formatDate} from '../../libs/date.js'
    export default{
        components:{GlobalFooter,Masklayer},
        data () {
            return{
                searchTimeFirst:'',
                searchTimeRecent:'',
                userLoading:false,
                userTableHead:[//表头
                    {
                        title: '微信号',
                        key: 'username',
                        align: 'center',
                         width:110
                    },
                    {
                        title: 'ID(暂时写上)',
                        key: 'id',
                        align: 'center',
                    },
                    {
                        title: 'openID',
                        key: 'weixinOpenid',
                        align: 'center',
                    },
                    {
                        title: '微信昵称',
                        key: 'nickname',
                        align: 'center'
                    },
                    {
                        title: '发布次数',
                        key: 'count',
                        align: 'center',
                    },
                    {
                        title: '手机号',
                        key: 'mobile',
                        align: 'center'
                    },
                     {
                        title: '首次登录时间',
                        key: 'registerTime',
                        align: 'center',
                        render:(h,params) =>{
                            return h('div',{},this.formatDate(params.row.registerTime))
                        }
                    },
                    {
                        title: '最近登录时间',
                        key: 'lastLoginTime',
                        align: 'center',
                        render:(h,params) =>{
                            return h('div',{},this.formatDate(params.row.lastLoginTime))
                        }
                    },
                ],
                userList:[],
                totalCount:100,
                totalPage:10,
                currentPage:1,
                pageSize:10,
                loaddingMask:false,
            }
        },
        mounted () {
            //初始化用户列表
            let param={
                page:this.currentPage,
                limit:this.pageSize,
                sidx:'',
                order:''
            }
            this.loaddingMask=true;
            Api.userList(param).then(res => {
                if(res.data.code=='0'){
                    this.totalCount=res.data.page.totalCount;
                    this.totalPage=res.data.page.totalPage
                    this.userList=res.data.page.list
                    setTimeout(res=>{ this.loaddingMask=false;},300)
                }else{
                    setTimeout(res1 =>{
                        this.loaddingMask=false,
                        this.$Message.info({
                            duration:1,
                            top:100,
                            content:res.data.msg
                        })
                    },300);
                }
            })
        },
        methods:{
            //刷新用户列表
            userListRefresh(){
                let param={
                    page:this.currentPage,
                    limit:this.pageSize,
                    sidx:'',
                    order:'',
                    firstAddTime1:this.searchTimeFirst[0],
                    firstAddTime2:this.searchTimeFirst[1],
                    recentAddTime1:this.searchTimeRecent[0],
                    recentAddTime2:this.searchTimeRecent[1]
                }
                if(this.searchTimeFirst==''){
                    param['firstAddTime1']='';
                    param['firstAddTime2']='';
                }
                if(this.searchTimeRecent==''){
                    param['recentAddTime1']='';
                    param['recentAddTime2']='';
                }
                Api.userList(param).then(res => {
                    if(res.data.code=='0'){
                        this.totalCount=res.data.page.totalCount;
                        this.totalPage=res.data.page.totalPage;
                        this.userList=res.data.page.list;
                        setTimeout(res=>{ this.loaddingMask=false;},300)
                    }else{
                        setTimeout(res1 =>{
                            this.loaddingMask=false,
                            this.$Message.info({
                                duration:1,
                                top:100,
                                content:res.data.msg
                            })
                        },300);
                    }
                })
            },
            //选择首次登录日期
            selectDateFirst(date){
                this.searchTimeFirst=date;
                console.log(this.searchTimeFirst)
            },
            //选择最近登录时间
            selectDateRecent(date){
                this.searchTimeRecent=date
            },
            //选择页数
            changePage(page){
                this.currentPage=page;
                this.userListRefresh();
            },
            //选择每页显示条数
            changePageSize(pageSize){
                this.pageSize=pageSize;
                this.userListRefresh();
            },
            //日期过滤
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        }
    }
</script>

<style lang="less">
    .userMgCon{
        header{
            .ivu-row-flex{
                padding:15px 0;
            }
        }
        .userList{
            padding:0 20px;
            .ivu-row-flex{
                padding:15px;
                .ivu-btn{width:80px;}
            }
        }
    }
</style>

